<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Pdf</title>
    <meta charset="UTF-8">
    <meta http-equiv="pragma" content="no-store">
    <meta http-equiv="Cache-Control" content="no-cache,no-store">
    <meta http-equiv="expires" content="0">
    <meta name="wap-font-scale" content="no">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <style media="screen" title="no_title">
        table {
            page-break-inside: avoid
        }
        .clear:after {
            content: '';
            display: block;
            clear: both;
            width: 0;
            height: 0
        }
        * {
            margin: 0;
            padding: 0;
            -webkit-tap-highlight-color: rgba(255, 255, 255, 0);
            font-family: Helvetica, sans-serif;
            -webkit-touch-callout: none;
            box-sizing: border-box;
            -webkit-box-sizing: border-box
        }

        a:active, a:hover, a:link, a:visited {
            text-decoration: none;
            outline: 0
        }

        ul, li {
            list-style: none
        }

        html, body {
            width: 100%;
            font-size: 20px;
            background-color: #fff
        }

        * {
            box-sizing: border-box;
            -webkit-box-sizing: border-box;
            outline: 0
        }

        .sheet {
            padding: 15px
        }

        .sheet header {
            font-size: 20px;
            color: #000;
            font-weight: 600;
            text-align: center;
            padding: 15px 0
        }

        .sheet section .question .title {
            font-size: 16px;
            color: #000;
            font-weight: 600;
            padding: 15px 0
        }

        .sheet section .question .title span.blue {
            color: #6eb1ff
        }

        .sheet section .question table {
            width: 100%;
            text-align: center
        }

        .sheet section .question table thead, .sheet section .question table tfoot {
            background-color: #eee
        }

        .sheet section .question table tr td:first-child, .sheet section .question table tr th:first-child {
            width: 40%
        }

        .sheet section .question table tr td:nth-child(2), .sheet section .question table tr th:nth-child(2) {
            width: 10%
        }

        .sheet section .question table tr td:nth-child(3), .sheet section .question table tr th:nth-child(3) {
            width: 50%
        }

        .sheet section .question table td, .sheet section .question table th {
            min-height: 36px;
            font-size: 14px;
            color: #000;
            line-height: 20px;
            padding: 7px 8px
        }

        .sheet section .question table .ratio-bar {
            display: inline-block;
            vertical-align: middle;
            width: 90%;
            height: 10px;
            border: 1px solid #ddd;
            border-radius: 10px;
            -webkit-border-radius: 10px
        }

        .sheet section .question table .ratio-bar .ratio {
            height: 10px;
            width: 0;
            background: #35c2ff;
            border-radius: 10px;
            -webkit-border-radius: 10px;
            margin-top: -1px
        }

        .sheet section .question table td span {
            display: inline-block;
            vertical-align: middle;
            margin-left: 8px
        }
    </style>
</head>
<body>
<div class="sheet">
    <header>{{ $activity->name }}</header>
    @foreach($quizzes as $quiz)
        <section>
            <div class="question">
                <div class="title">第{{ $loop->iteration }}题&nbsp;&nbsp;{{ $quiz['title'] }} <span class="blue">[{{ $types[$quiz['type']] }}]</span></div>
                <table cellspacing="0" cellpadding="0" border="1" bordercolor="#ddd">
                    <thead>
                    <tr>
                        <th>选项</th>
                        <th>小计</th>
                        <th>比例</th>
                    </tr>
                    </thead>
                    <tbody>
                    @foreach($quiz['options'] as $option)
                        <tr>
                            <td>{{ $option['text'] }}</td>
                            <td>{{ $option['total'] }}</td>
                            <td>
                                <div>
                                    @if($quiz['selected_total'] == 0)
                                        <div class="ratio-bar">
                                            <div class="ratio" style="width: 0"></div>
                                        </div>
                                        <span>0%</span>
                                    @else
                                        @php($per = round($option['total'] / $quiz['selected_total'] * 100, 1))
                                        <div class="ratio-bar">
                                            <div class="ratio" style="width: {{ $per }}%"></div>
                                        </div>
                                        <span>{{ $per }}%</span>
                                    @endif
                                </div>
                            </td>
                        </tr>
                    @endforeach
                    </tbody>
                    <tfoot>
                    <tr>
                        <td>本题有效填写</td>
                        <td>{{ $quiz['selected_total'] }}</td>
                        <td></td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </section>
    @endforeach
</div>
</body>
</html>